// import React from "react"

const SubAll2 = () => {
	let UserName = '棕熊'
	let DoWhat = ',来继续学React吧'
	let IsLogin = true
	let MyStyle = { color: 'red' }
	let List = [
		{
			name: '1号',
		},
		{
			name: '2号',
		},
		{
			name: '3号',
		},
	]

	return (
		<>
			<div className="nav2">
				{/* <button onClick={(e) => this.ChangeState(MyStyle, e)}>
					点我改变登录状态
				</button> */}
				<h4>2.数组遍历到视图 三元运算 变量的使用 </h4>
				{/* 三元判断 */}
				<p style={IsLogin ? null : MyStyle}>
					{/* 字符串和变量之间的拼接 */}
					{IsLogin ? '欢迎回来,' + UserName + DoWhat : '请先登录'}
				</p>
				<form>
					<table border={1}>
						<tbody>
							<tr>
								<td>编号</td>
								<td>机器人</td>
							</tr>
						</tbody>
						{/* 开始遍历List数组 item参数为数据 index参数为索引值 */}
						{List.map((item, index) => {
							return (
								// 在标签头加一个key值作为需要遍历的索引
								<tbody key={index}>
									<tr>
										{/* 在这里即可输出遍历的值 */}
										<td>{index}</td>
										<td>{item.name}</td>
									</tr>
								</tbody>
							)
						})}
					</table>
				</form>
			</div>
		</>
	)
}
export default SubAll2
